<template>
    <div id="anno">
        <div class="breadcrumb">
            <img src="../../../../static/img/campus_icon_1.png" class="head_img">
            <span class="title">公告管理</span>
        </div>
        <div class="list">
            <div class="list_head">
                <span class="head_name">公告列表</span>
                <el-button class="add" type="primary" @click="editAnno()">添加公告</el-button>
            </div>
            <el-table :data="list" @row-click="annoDetail">
                <el-table-column prop="title" label="标题" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="campus" label="目标校区">
                </el-table-column>
                <el-table-column prop="status" label="状态">
                </el-table-column>
                <el-table-column prop="updateTime" label="最新操作时间" show-overflow-tooltip>
                </el-table-column>
                <el-table-column width="200px" align="right">
                    <template scope="scope">
                        <el-button size="small" type="text" @click.stop="editAnno(scope.row)" v-if="scope.row.status =='草稿'">编辑</el-button>
                        <el-button size="small" type="text" @click.stop="publishAnno(scope.row)" v-if="scope.row.status =='草稿'">发布</el-button>
                        <el-button size="small" type="text" @click.stop="unpublishAnno(scope.row)" v-if="scope.row.status =='已发布' && scope.row.annoType == 0">撤销发布</el-button>
                        <el-button size="small" type="text" @click.stop="deleteAnno(scope.row)" v-if="scope.row.status =='草稿'">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import { mapState, mapActions } from "vuex";

    export default {
        data() {
            return {
                list: []
            };
        },
        mounted() {
            this.getAnnoList();
        },
        computed: mapState({ user: state => state.user }),
        methods: {
            // 获取公告列表
            getAnnoList() {
                this.list = [];
                let url = this.$util.domain + "/announcement/list";

                this.$http({
                    url,
                    method: "GET"
                }).then(response => {
                    if (response.data.error == 10000) {
                        let list = response.data.data;
                        if (list && list.length > 0) {
                            for (let i = 0; i < list.length; i++) {
                                let $statusText,
                                    $index = i + 1,
                                    $id = list[i].id,
                                    $title = list[i].title,
                                    $status = list[i].status,
                                    $campus = list[i].campus,
                                    $annoType = list[i].annoType,
                                    $updateTime = list[i].updateTime;
                                if ($status == 1) {
                                    $statusText = "草稿";
                                } else if ($status == 2) {
                                    $statusText = "已发布";
                                }
                                this.list.push({
                                    id: $id,
                                    index: $index,
                                    title: $title,
                                    campus: $campus,
                                    annoType: $annoType,
                                    status: $statusText,
                                    updateTime: new Date($updateTime).format("yyyy/MM/dd hh:mm")
                                });
                            }
                        }
                    }
                });
            },
            annoDetail(row) {
                location.href = `/#/annoDetail?id=${row.id}`;
            },
            editAnno(row) {
                if (row) {
                    location.href = `/#/newAnno?id=${row.id}`;
                } else {
                    location.href = "/#/newAnno";
                }
            },
            publishAnno(row) {
                this.$confirm("您确定要发布“" + row.title + "”吗？", "温馨提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消"
                }).then(() => {
                    this.updateStatus(row.id, 2, (response) => {
                        if (response.data.error == 10000) {
                            this.$util.successMsg("发布成功");
                            this.getAnnoList();
                        } else {
                            this.$util.errorMsg(response.data.message);
                        }
                    });
                }).catch(() => { });
            },
            unpublishAnno(row) {
                this.$confirm("您确定要撤销“" + row.title + "”吗？", "温馨提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消"
                }).then(() => {
                    this.updateStatus(row.id, 1, (response) => {
                        if (response.data.error == 10000) {
                            this.$util.successMsg("撤销成功");
                            this.getAnnoList();
                        } else {
                            this.$util.errorMsg(response.data.message);
                        }
                    });
                }).catch(() => { });
            },
            deleteAnno(row) {
                this.$confirm("您确定要删除“" + row.title + "”吗？", "温馨提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消"
                }).then(() => {
                    let url = this.$util.domain + "/announcement/delete";
                    this.$http({
                        url,
                        method: "POST",
                        body: JSON.stringify({
                            id: parseInt(row.id)
                        })
                    }).then(response => {
                        if (response.data.error == 10000) {
                            this.$util.successMsg("删除成功");
                            this.getAnnoList();
                        } else {
                            this.$util.errorMsg(response.data.message);
                        }
                    });
                }).catch(() => { });
            },
            //系统公告状态变更，
            updateStatus(id, status, callback) {
                let url = this.$util.domain + "/announcement/changestatus";

                this.$http({
                    url,
                    method: "POST",
                    body: JSON.stringify({
                        id: parseInt(id),
                        updateStatus: status
                    })
                }).then(response => {
                    callback(response);
                });
            }
        }
    };
</script>

<style>
    #anno {
        padding-top: 80px;
        height: calc(100% - 100px);
    }

    #anno .el-table--enable-row-hover .el-table__body tr:hover>td {
        background-color: #f7fcff;
        cursor: pointer;
    }

    #anno .list {
        padding-bottom: 20px;
        height: calc(100% - 30px);
    }

    #anno .add {
        position: absolute;
        right: 0px;
    }

    #anno .search {
        margin: 20px;
    }

    #anno .qizhiDate {
        width: 100%;
    }
</style>